<template>
	<view class="bg-f is-foot-boxpd">
		<!-- 顶部菜单 star-->				
		<view class="is-nav">
			<view class="is-nav-li is-center is-blue is-active">
				首页
			</view>
			<view class="is-nav-li is-center is-grey">
				<text @tap="toorder">OTC接单</text>
			</view>
			<view class="is-nav-li is-size-14 is-online" :class="[online === false ? 'is-red-color is-bold' : 'is-blue']">
				{{online === false ? '离线' : '在线'}}
			</view>
		</view>				
		<!-- 顶部菜单 end -->
		<!-- 公告滚动 -->
		<view class="an-notice-box" :style="'background-color: '+bgColor+';'">
			<view class="an-notice-icon">
				公告
			</view>
			<view class="an-notice-content">
				<view v-for="(item, index) in list" :key="index" v-if="number == index" class="an-notice-content-item" :style="'animation: anotice '+switchTime+'s linear;'">
					<navigator :url="'../notice/notice_page?g_id='+item.g_id">
					<text class="an-notice-content-item-text" :style="'color: '+color+';'">{{item.g_title}}</text>
					</navigator>
				</view>
			</view>
			<view class="an-notice-more">
				<navigator url="/pages/notice/notice_list">
				<text>更多</text>
				<uni-icons type="arrowright" color="#999" size="12" />
				</navigator>
			</view>
		</view>
		<!-- 公告滚动结束 -->		
		<!-- 主体 start  -->
		<view class="has-pdlr-20 has-mgt-20">
			<!--当前信息 start-->
			<view class="is-size-14">
				<!--当前余额 start-->
				<text class="is-grey">当前余额</text>
				<view>
					<view class="has-floatl is-size-30 is-bold">
						<text>{{user_money}}</text>DC
					</view>
					<view class="has-floatr">
						<navigator url="/pages/account/account">
						<button class="buy-button">
							<image src="../../static/img/common/money_ico.png" mode=""></image>
							一键买币
						</button>
						</navigator>
					</view>
				</view>
				<view class="clearfix"></view>
				<!--当前余额 end-->
				<!--可用余额 start-->
				<view class="is-grey has-mgt-20">
					<view class="has-floatl has-mgr-20">可用余额：<text>{{user_money_can}}DC</text></view>
					<view class="">冻结：<text>{{user_money_lock}}DC</text></view>
				</view>
				<!--可用余额 end-->
				<!--余额说明 start-->
				<view class="is-red has-mgt-15">可用余额低于{{fox_money_can}}DC时将无法接单</view>
				<!--余额说明 end-->
				<!--今日信息 start-->
				<view class="is-today has-mgt-20" @click="tohis">
					<view class="is-today-li">
						<view class="is-size-25 is-blod">{{today_order}}</view>
						<text>今日接单</text>
					</view>
					<view class="is-today-li">
						<view class="is-size-25 is-blod">{{today_money}}</view>
						<text>今日流水(万)</text>
					</view>
					<view class="is-today-li">
						<view class="is-size-25 is-blod">{{today_incom}}</view>
						<text>今日盈利</text>
					</view>
				</view>
				<view class="clearfix"></view>
				<!--今日信息 end-->
			</view>			
			<!--当前信息 end-->
		
		</view>
		<!-- 主体 end-->
		<!-- 底部 start-->
		<view class="is-foots bg-f has-mgb-10">
			<view class="is-index-foot">
				<button type="warn" class="is-set-qr" @click = "setcode">
					设置<image src="../../static/img/common/qr.png" mode=""></image>
				</button>
				<button type="primary" class="is-start-take" @click = "toorder">开始接单</button>
			</view>
		</view>
		<view v-show="message_num" class="has-pdlr-10 is-center" @tap="tomessage">
			提醒：您的用户消息已有 <text class="is-red has-pdlr-5">{{message_num}}</text> 条
		</view>
		<view class="has-pdtb-10">
			<MarqueeText
				ref="MarqueeText"
				:list="marqueeList"
				current="0"
				speed="20"
				:show="showMarquee"
				@close="showMarquee = false"
				@tapItem="tapMarqueeItem"
				@completed="onMarqueeListRenderCompleted"
			></MarqueeText>
		</view>
		<view class="has-pdlr-10">
			<block v-for="(item, index) in arr" :key="index">
				<view class="qiun-columns" style="background-color: #FFFFFF;">
					<u-charts :canvas-id="item.id" :chartType="item.chartType" :cWidth="cWidth" :cHeight="cHeight" :opts="item.opts" :ref="item.id"/>
				</view>
			</block>
			<button class="qiun-button" @tap="changeData()">更新图表</button>
		</view>
		<!-- 底部 ent-->
		<!-- 底部导航 -->
		<view class="is-foot bg-f footmemu is-center">
			<view class="is-col-4 has-pdtb-4">
				<image src="../../static/tabbar/homeH.png" mode=""></image>
				<text class="is-blue is-block">首页</text>
			</view>
			<view class="is-col-5 has-pdtb-4" @click = "toorder">
				<image src="../../static/tabbar/order.png" mode=""></image>
				<text class="is-block">接单</text>
			</view>
			<view class="is-col-6 has-pdtb-4"  @tap="goshare">
				<image src="../../static/tabbar/share.png" mode=""></image>
				<text class="is-block">邀请赚钱</text>
			</view>
			<view class="is-col-5 has-pdtb-4" @tap="gohome">
				<image src="../../static/tabbar/my.png" mode=""></image>
				<text class="is-block">我的</text>
			</view>
			<view class="is-col-4 has-pdtb-4" @tap="gochat">
				<image src="../../static/tabbar/kefu.png" mode=""></image>
				<text class="is-block">客服</text>
			</view>
		</view>
		<!-- 底部导航 -->
		<view>
		    <show-modal></show-modal>
		</view>
	</view>
</template>

<script>	
	import uCharts from '@/components/uCharts/component.vue';
	import MarqueeText from '@/components/marquee-text/marquee-text.vue'; // 跑马灯

	import {
		isJSON
	} from '@/static/js/checker.js';
	var _self;
	var heartimer = null;
	var banben = null;

	export default {
		data() {
			return {
				showLeft: false,
				showRight: false,
				foxtoken:'',
				foxcode:'',
				foxactive:'',
				memu:[],
				userinfo:[],
				fox_money_can:0,
				fox_user_jihuo:0,
				online:false,
				ma_lock:0,
				socketTask: null,
				// 确保websocket是打开状态
				is_open_socket: false,
				user_money:0,
				user_money_can:0,
				user_money_lock:0,
				today_order:0,
				today_money:0,
				today_incom:0,
				color: '#ff3300',
				bgColor:'#ffffff',
				number: 0,
				switchTime: 3,
				list: [],
				position:'',
				diamond_sheng_on:'',
				diamond_shi_on:'',
				diamond_order_time:0,
				textarea: '',
				cWidth:'',
				cHeight:'',
				arr: [],
				message_num:0,
				marqueeList: [], // 跑马灯数据列表
				showMarquee: true // 是否显示跑马灯？
			}
		},
		components: {
			uCharts,
			MarqueeText
		},
		onLoad() {	
			_self = this;
			// uni.clearStorageSync();
			
			try {
			    const value = uni.getStorageSync('music');
				// console.log(value)
			    if (value === '') {
					uni.setStorageSync('music', true);
				}
				// console.log(uni.getStorageSync('music'))
			} catch (e) {
			    
			}
			//锁定用户Aree
			uni.setStorageSync('region', '');
			
			let info = this.service.getfox();
			if(info[0]){
				// console.log(info[0])				
				this.foxtoken = info[0]['foxtoken'];
				//#ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{
					banben = wgtinfo.version;//应用版本号
					console.log(banben)
				})
				//#endif
				// uni.clearStorageSync();
				uni.request({
					url: this.service.FOX_URL + 'diamond/get_userinfo_home',
					method:'POST',
					data: {
						user_key: this.foxtoken,
						banben:banben
					},
					dataType:'json',
					header:{
						'content-type':'application/x-www-form-urlencoded',
					},
					success: res => {
						// var rest = JSON.stringify(res);
						// console.log(res)
						var rest = res.data;
						if(rest.status == 'success'){
							this.userinfo = rest.msg;
							this.ma_lock = this.userinfo['ma_lock'];
							this.user_money = this.userinfo['user_money'];
							this.user_money_can = this.userinfo['user_money_can'];
							this.user_money_lock = this.userinfo['user_money_lock'];
							this.today_order = this.userinfo['today_order'];
							this.today_money = this.userinfo['today_money'];
							this.today_incom = this.userinfo['today_incom'];
							this.fox_money_can = this.userinfo['diamondset']['diamond_money_can'];
							this.fox_user_jihuo = this.userinfo['diamondset']['diamond_user_jihuo'];
							this.diamond_sheng_on = this.userinfo['diamondset']['diamond_sheng_on'];
							this.diamond_shi_on = this.userinfo['diamondset']['diamond_shi_on'];
							this.diamond_order_time = this.userinfo['diamondset']['diamond_order_time'];
							if(this.userinfo['ma']){
								uni.setStorageSync('matype', this.userinfo['ma']['ma_type']);
							}
							if(this.diamond_sheng_on || this.diamond_shi_on){
								uni.setStorageSync('area', 'on');
							}
							if(this.diamond_order_time && this.diamond_order_time > 0){
								uni.setStorageSync('active', true);
							}else{
								uni.setStorageSync('active', false);
							}
							this.list = this.userinfo['notice'];
							if(this.userinfo['user_position']){
								uni.setStorageSync('region', this.userinfo['user_position']);
							}
							this.message_num = this.userinfo['message_num'];
						}else if(rest.status == 'error'){
							uni.clearStorageSync();
							uni.showToast({
								title:rest.msg,
								icon:'none',
								mask:true
							})
							setTimeout(function() {
							    uni.reLaunch({
							    	url:'../logon/login'
							    })
							}, 1500)
						}else{
							uni.clearStorageSync();
							uni.reLaunch({
								url:'../logon/login'
							})
						}
					}
				})
			}else{
				uni.reLaunch({
					url:'../logon/login'
				})
			}
			
			this.memu = this.service.memu;
			this.startMove();
			
			let that = this
			that.$websocket.commit('webSocketUser');
			
			this.online = that.$websocket.getters.sendStatus;
			
			this.cWidth=uni.upx2px(710);
			this.cHeight=uni.upx2px(500);
			this.getServerData();
		},
		onReady() {
			let that = this;
			for (let i = 1; i <= 6; i++) {
				let name = this.service.UserNameRand(2);
				let price = this.service.RandomNum(100,999);
				let pricet = this.service.RandomNum(10,99);
				if(name && price && pricet){
					that.marqueeList.push({
						id: i,
						text: '恭喜：成员 1****' + name + ' 刚刚 成功抢单' +price+ '.'+pricet+'元'
					});
				}
			}
		},
		computed: {
			socketMsgs() {
				return this.$websocket.getters.socketMsgs
			},
			onlines(){
				let that = this
				return that.$websocket.getters.sendStatus
			}
		},
		watch:{
			'socketMsgs': {
				//处理接收到的消息
				handler: function() {
					let that = this
					console.log("接收到msg")
					let sMsg = that.socketMsgs
					setTimeout(() => {
						this.showuser(sMsg);
					}, 1000);
					
				}
			},
			onlines: {
				handler:(Val)=>{
					_self.online = Val;
				},
				deep:true
			}
		},
		methods: {
			/**
			 * 查询跑马灯数据列表
			 */
			queryMarqueeList() {
				
			},
	
			/**
			 * 跑马灯数据列表渲染完成
			 */
			onMarqueeListRenderCompleted() {
				this.$refs.MarqueeText.start();
			},
			
			/**
			 * 显示跑马灯
			 */ 
			onShowMarquee() {
				this.showMarquee = true;
			},
			
			/**
			 * 监听跑马灯点击事件
			 * @param {Object} item 数据对象
			 * @param {Number} index 数据下标
			 */
			tapMarqueeItem(item, index) {
				console.log('点击了跑马灯：', item, index);
			},
			showuser:function(sMsg){
				if(sMsg.type == 'userinfo'){
					_self.today_order = sMsg.data.list['today_order'];
					_self.today_money = sMsg.data.list['today_money'];
					_self.today_incom = sMsg.data.list['today_incom'];
					_self.online = true;
				}
			},
			startMove () {
				let timer = setTimeout(() => {
				if (this.number === this.list.length-1) {
					this.number = 0;
				} else {
					this.number += 1;
				}
					this.startMove();
				}, this.switchTime*1000);
			},			
			noticemore(){
				uni.navigateTo({
					url:'../notice/notice_list'
				})
			},
			gohome(){
				uni.reLaunch({
					url:'../member/homes'
				})
			},
			goshare(){
				uni.reLaunch({
					url:'../member/my_shares'
				})		
			},
			toorder(){
				if(this.diamond_order_time>0){
					uni.reLaunch({
						url:'/pages/index/order_ing'
					})
				}else{
					uni.reLaunch({
						url:'/pages/index/orderline'
					})
				}
								
			},
			gochat(){
				uni.reLaunch({
					url:'/pages/index/chat'
				})				
			},
			setcode(){
				uni.navigateTo({
					url:'../allcode/listcode'
				})
			},
			getServerData() {
				uni.request({
					url: this.service.FOX_URL + 'diamond/get_json',
					data: {},
					success: function(res) {
						let LineA = {
							categories: [],
							series: []
						};
						LineA.categories = res.data.data.LineA.categories;
						LineA.series = res.data.data.LineA.series;

						let Column = {
							categories: [],
							series: []
						};
						Column.categories = res.data.data.ColumnB.categories;
						Column.series = res.data.data.ColumnB.series;

						_self.textarea = JSON.stringify(res.data.data.LineA);

						let serverData = [{
							opts: LineA,
							chartType: "line",
							id: "abcc"
						}, {
							opts: Column,
							chartType: "column",
							id: "bcdd"
						}];

						_self.arr = serverData;
					},
					fail: () => {
						_self.tips = "网络错误";
					},
				});
			},
			changeData() {
				//这里newdata仅做为演示，实际请先获取后台数据，再调用子组件changeData事件
				let newdata = JSON.parse(_self.textarea);
				//'bcdd'为之前后台获取的第二个图表的id，不是固定不变的
				this.$refs.bcdd[0].changeData('bcdd',newdata)
			},
			tomessage(){
				uni.navigateTo({
					url:'../activity/activity_list'
				})
			},
			tohis(){
				uni.navigateTo({
					url:'../order/history_order'
				})
			}
		}
	}
</script>

<style>
	.is-foots{
		margin: 40upx auto;
		text-align: center;
	}
	.buy-button{
		color: #2A62FF;
		background-color:#fff;
		border:2rpx solid #2A62FF;
		border-radius: 0;
	}
	.buy-button image{
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
		margin-right: 20rpx;
	}
	.is-today .is-today-li{
		width:31%;
		float:left;
		text-align: center;
		background:#f0f0f0;
		margin-right:20rpx;
		padding:40rpx 0;
	}
	.is-today .is-today-li:last-child{
		margin-right:0;
	}
	.is-notice{
		background: #f0f0f0;
	}
	.is-notice .is-notice-h1 image{
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
		margin-right: 20rpx;
	}
	.is-nonite-li{
		height: 120rpx;
		line-height: 60rpx;
		border-bottom: 2rpx solid #E5E5E5;
		margin-top:20rpx;
	}
	.is-nonite-time image{
		width: 50rpx;
		height: 50rpx;
		float: right;
	}
	.is-index-foot button{
		display: inline-block;
		border-radius: 0;
	}
	.is-set-qr{
		width:30%;
		margin-right: 3%;
	}
	.is-set-qr image{
		width:50rpx;
		height:40rpx;
		vertical-align: middle;
	}
	.is-start-take{
		width:57%
	}
	.an-notice-box{
		height: 40upx; 
		overflow: hidden; 
		margin: 40upx 0; 
		padding:0 20upx;
		display: flex; 
		justify-content: flex-start;
	}
	.an-notice-icon{
		width: 100upx; 
		height: 40upx; 
		line-height: 40upx; 
		text-align: center; 
		position: relative;
	}
	.an-notice-content{
		width: calc(100% - 220upx); 
		position: relative; 
		font-size: 16px;
	}
	.an-notice-content-item{
		width: 100%; 
		height: 40upx; 
		text-align: left; 
		line-height: 40upx;
		overflow: hidden;
	}
	.an-notice-content-item-text{
		display: block; 
		white-space: nowrap; 
		text-overflow: ellipsis; 
		overflow: hidden;
	}
	.an-notice-more{
		width: 120upx; 
		height: 40upx; 
		font-size: 16px; 
		line-height: 40upx; 
		text-align: right; 
		color: #999;
	}
	.qiun-padding{padding:2%; width:96%;}
	.qiun-wrap{display:flex; flex-wrap:wrap;}
	.qiun-rows{display:flex; flex-direction:row !important;}
	.qiun-columns{display:flex; flex-direction:column !important;}
	.qiun-common-mt{margin-top:10upx;}
	.qiun-bg-white{background:#FFFFFF;}
	.qiun-title-bar{width:96%; padding:10upx 2%; flex-wrap:nowrap;}
	.qiun-title-dot-light{border-left: 10upx solid #0ea391; padding-left: 10upx; font-size: 32upx;color: #000000}
	.qiun-charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
	.charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
	
	@keyframes anotice {
		 0%  {transform: translateY(80%);}
	    30%  {transform: translateY(0);}
	    70%  {transform: translateY(0);}
	   100%  {transform: translateY(-100%);}
	}
</style>
